<template>
  <div class="JNPF-common-layout" style="min-height: 650px;">
    <div class="JNPF-preview-main">
      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label="预订开始时间" prop="bookstarttime">
                <el-date-picker :disabled="pageType=='detail'" v-model="dataForm.bookstarttime" placeholder="请选择" clearable :style='{"width":"100%"}'
                  type="datetime" format="yyyy-MM-dd HH:mm" value-format="timestamp">

                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预订结束时间" prop="bookendtime">
                <el-date-picker :disabled="pageType=='detail'" v-model="dataForm.bookendtime" placeholder="请选择" clearable :style='{"width":"100%"}'
                  type="datetime" format="yyyy-MM-dd HH:mm" value-format="timestamp">

                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="会议室名称" prop="meetingroomid">
                <JNPFTreeSelect :disabled="pageType=='detail'" v-model="dataForm.meetingroomid" placeholder="请选择" clearable
                  :options="meetingroomidOptions" :props="meetingroomidProps">

                </JNPFTreeSelect>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预订部门" prop="bookdepartment">
                <dep-select :disabled="pageType=='detail'" v-model="dataForm.bookdepartment" placeholder="请选择" clearable>

                </dep-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="预订人员" prop="bookuserid">
                <user-select :disabled="pageType=='detail'" v-model="dataForm.bookuserid" placeholder="请选择" clearable>

                </user-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="参会人员" prop="meetingusers">
                <user-select :disabled="pageType=='detail'" v-model="dataForm.meetingusers" placeholder="请选择" clearable>

                </user-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="会议主题" prop="meetingtheme">
                <el-input :disabled="pageType=='detail'" v-model="dataForm.meetingtheme" placeholder="请输入" clearable :style='{"width":"100%"}'>

                </el-input>
              </el-form-item>
            </el-col>
          </template>
          <div class="JNPF-common-page-header" style="border: none;">
            <div class="options">
              <el-button @click="goBack">关闭</el-button>
              <el-button v-if="pageType!='detail'" type="primary" @click="dataFormSubmit()"> 保 存</el-button>
            </div>
          </div>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'

  export default {
    components: {},
    props: [],
    data() {
      return {
        loading: false,
        dataForm: {
          planid: '',
          bookstarttime: '',
          bookendtime: '',
          meetingroomid: "",
          bookdepartment: '',
          bookuserid: '',
          meetingusers: "",
          meetingtheme: '',
        },

        rules: {
          bookstarttime: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }, ],
          bookendtime: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }, ],
          meetingroomid: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }, ],
          bookdepartment: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }, ],
          bookuserid: [{
            required: true,
            message: '请选择',
            trigger: 'click'
          }, ],
          meetingusers: [{
            required: true,
            message: '请选择',
            trigger: 'click'
          }, ],
          meetingtheme: [{
            required: true,
            message: '请输入',
            trigger: 'blur'
          }, ],
        },
        meetingroomidOptions: [],
        meetingroomidProps: {
          "children": "children",
          "label": "fullName",
          "value": "id"
        },
        pageType:'',//detail 详情
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getmeetingroomidOptions();
    },
    mounted() {},
    methods: {
      getmeetingroomidOptions() {
        getDictionaryDataSelector('9c43287481364d348c0ea0d0f64b38be').then(res => {
          this.meetingroomidOptions = res.data.list
        })
      },
      goBack() {
        this.$emit('refresh')
      },
      init(row,type) {
        this.dataForm.planid = row.id;
        this.pageData = row
        this.pageType=type
        request({
          url: `/api/example/BusMeetingroombook/detail/${row.id}`,
          method: 'get',
        }).then((res) => {
          if (res.code == 200 && res.data) {          
            this.dataForm = res.data;
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            var _data = this.dataList()
            if (this.pageData.taskcount == 1) {
              // 编辑
              request({
                url: `/api/example/BusMeetingroombook/${this.dataForm.id}`,
                method: 'put',
                data: _data
              }).then((res) => {
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.$emit('refresh', true)
                  }
                })
              })
            } else {
              // 添加
              request({
                url: `/api/example/BusMeetingroombook`,
                method: 'post',
                data: _data
              }).then((res) => {
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.$emit('refresh', true)
                  }
                })
              })
            }


          }
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
        this.init()
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        return _data;
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        this.dataForm = _dataAll
      },
    },
  }

</script>
